<template>
	<view class="container">
		<form @submit="formSubmit" @reset="formReset">
			<view class="section-title">基本信息</view>
			<view class="item">
				<view class="title">姓名</view>
				<input class="input" placeholder="请输入姓名" v-model="formData.name" :disabled="isEdit === false">
			</view>
			<view class="item">
				<view class="title">性别</view>
				<radio-group class="rdg" @change="({ detail: { value } }) => formData.sex = value">
					<radio value="0" :checked="formData.sex === 0">女</radio>
					<radio value="1" :checked="formData.sex === 1" style="margin-left: 20rpx;">男</radio>
				</radio-group>
			</view>
			<view class="item">
				<view class="title">年龄</view>
				<input class="input" placeholder="请输入年龄" type="number" v-model="formData.age" :disabled="isEdit === false">
			</view>
			<view class="item">
				<view class="title">手机号码</view>
				<input class="input" placeholder="请输入手机号码1" type="tel" v-model="formData.mobile" :disabled="isEdit === false">
				<input class="input" placeholder="请输入手机号码2" type="tel" v-model="formData.mobile1" :disabled="isEdit === false">
			</view>
			<view class="item">
				<view class="title">学校</view>
				<input class="input" placeholder="请输入学校" v-model="formData.school" :disabled="isEdit === false">
			</view>
			<view class="section-title">家长信息</view>
			<view class="item">
				<view class="title">家长1</view>
				<input class="input" placeholder="请输入家长1姓名" v-model="formData.parent_name" :disabled="isEdit === false">
			</view>
			<view class="item">
				<view class="title">家长1联系方式</view>
				<input class="input" placeholder="请输入家长1联系方式" type="tel" v-model="formData.parent_mobile" :disabled="isEdit === false">
			</view>
			<view class="item">
				<view class="title">家长2</view>
				<input class="input" placeholder="请输入家长2姓名" v-model="formData.parent_name1" :disabled="isEdit === false">
			</view>
			<view class="item">
				<view class="title">家长2联系方式</view>
				<input class="input" placeholder="请输入家长2联系方式" type="tel" v-model="formData.parent_mobile1" :disabled="isEdit === false">
			</view>
			<template v-if="id">
				<button form-type="submit" v-if="isEdit">保存</button>
				<button @click="isEdit = true" v-else>编辑</button>
			</template>
			<button form-type="submit" v-else>添加</button>
		</form>
	</view>
</template>

<script>
import { add, edit, detail } from "@/api/student.js";

export default {
	data() {
		return {
			formData: {
				name: '',
				age: '',
				sex: '',
				mobile: '',
				mobile1: '',
				school: '',
				parent_name: '',
				parent_mobile: '',
				parent_name1: '',
				parent_mobile1: '',
			},
			id: '',
			isEdit: false,
		}
	},
	onLoad(opts) {
		const { id } = opts;
		this.id = id;
		this.isEdit = !!this.id === false;
		if (id) {
			this.getDeatil();
		}
	},
	methods: {
		getDeatil() {
			uni.showLoading({
				title: '加载中'
			});
			detail({
				id: this.id
			}).then((res) => {
				console.warn(res);
				Object.assign(this.formData, res);
			}).catch(console.warn).finally(uni.hideLoading);
		},
		formSubmit(item) {
			console.warn(item, this.formData);
			if (this.id) {
				this.edit();
			} else {
				this.add();
			}
		},
		add() {
			uni.showLoading({
				title: '保存中'
			});
			add(this.formData).then((res) => {
				uni.showToast({
					title: '已保存'
				});
				for (const k in this.formData) {
					this.formData[k] = '';
				}
			}).catch(console.warn).finally(uni.hideLoading);
		},
		edit() {
			uni.showLoading({
				title: '保存中'
			});
			edit({
				...this.formData,
				id: this.id,
			}).then((res) => {
				uni.showToast({
					title: '已保存'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 2500)
			}).catch(console.warn).finally(uni.hideLoading);
		},
		formReset(item) {
			
		},
	}
}
</script>

<style lang="scss" scoped>
	.container {
		.section-title {
			font-weight: bold;
			padding: 20rpx;
		}
		.item {
			.input {
				background-color: white;
				padding: 30rpx 20rpx;
			}
			.input:nth-child(n + 2) {
				border-top: 1rpx solid $km-border-color;
			}
			
			.title {
				padding: 20rpx;
			}
			.rdg {
				background-color: white;
				padding: 30rpx 20rpx;
				display: flex;
				align-items: center;
			}
		}
	}
	
	.record-add {
		margin: 20rpx auto 20rpx;
		display: block;
		width: 220rpx;
	}
</style>
